<template>
<section class="edit-info">
    <section class="upload-file-section">
        <div class="form-item">
            <section class="title-section">
                发票补充上传
            </section>
            <el-upload
                drag
                accept=".jpg,.png,.pdf"
                action="/upload/invoice"
                :data="{key: 'invoiceFileIds'}"
                :http-request="uploadFile"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">
                    <div>提示:</div>
                    <div>1. 票据包含增值税发票、机打发票和餐票</div>
                    <div>2. 务必保证票据文字清晰可见，若有明显折痕请手动输入，否则影响出账结果</div>
                </div>
            </el-upload>
        </div>
        <div class="form-item">
            <section class="title-section">
                银行回单补充上传
            </section>
            <el-upload
                drag
                accept=".jpg,.png,.pdf"
                action="/upload/bankSlip"
                :data="{key: 'bankSlipFileIds'}"
                :http-request="uploadFile"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">
                    <div>提示:</div>
                    <div>1. 务必保证票据文字清晰可见，若有明显折痕请手动输入，否则影响出账结果</div>    
                </div>
            </el-upload>
        </div>
    </section>
    <footer>
        <el-button type="primary" size="mini" @click="submit">提交</el-button>
    </footer>
</section>
</template>
<script>
export default {
    props: [
        'accountBillData'
    ],
    components: {
        
    },
    data() {
        return {
            invoiceFileIds: [],
            bankSlipFileIds: []
        };
    },
    
    methods: {
        
        /**
         * 上传文件，当一次性选择多个文件时，会分多次上传
         *
         * @param {Object} fileData 文件数据
         */
        uploadFile(fileData) {
            const formData = new FormData();
            formData.append('companyName', this.accountBillData.companyName);
            formData.append('fileName', fileData.file.name);
            formData.append('file', fileData.file);

            this.$http.post(
                fileData.action,
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
            ).then(res => {
                this[fileData.data.key].push(res.data.fileId);
            });
        },

        /**
         * 提交
         */
        submit() {
            this.$http.post('/accountBills/updateCheckDelta', {
                companyName: this.accountBillData.companyName,
                invoiceFileIds: this.invoiceFileIds,
                bankSlipFileIds: this.bankSlipFileIds
            }).then(() => {
                this.$router.push('/upload-info/list');
            });
        }
    }
}
</script>
<style lang="less" scoped>
@import '../../../assets/var.less';
.edit-info {
    .upload-file-section {
        display: flex;
        padding: 0 0 20px 0;
        .form-item {
            flex: 1;
        }
        .form-item ~ .form-item {
            margin-left: 20px;
        }
        .title-section {
            margin: 0 0 10px 0;
            padding-bottom: 10px;
            line-height: 1.5em;
        }
        .upload-item {
            display: inline-block;
        }
    }
    > footer {
        padding: 20px 0;
        text-align: center;
    }
}
</style>